<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <!-- 默认的 -->
      <lk-box></lk-box>
      <hr>
      <lk-box>
        <template v-slot:default="slotProps">
          <span>{{slotProps.data.join('---')}}</span>    
        </template>
      </lk-box>
      <hr>
      <lk-box>
        <template v-slot:default="slotProps">
         <span>{{slotProps.data}}</span>
        </template>
      </lk-box>
    </div>

    <template id="box">
      <div style="background-color: bisque; width: 200px; height: 200px; margin: 20px;">
        <slot :data="nameArr">
          <ul>
            <li v-for="name in nameArr">{{name}}</li>
          </ul>
        </slot>
      </div>
      
    </template>

    <script src="../js/vue.js"></script>

    <script>
      const Lkbox = {
          data(){
            return {
              nameArr:['haha','yoyo','hehe']
            }
          },
          template:'#box'
      };
      const app = Vue.createApp({
        data() {
          return {
            
          }
        },
        components:{
          'lk-box':Lkbox
        }
      }).mount("#app");
    </script>
  </body>
</html>